<template>
  <div class="deviceInfo">
    <!-- 查询条件 -->
    <el-form ref="searchForm" :model="searchForm" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="7">
          <el-form-item label="名称" prop="keyWord">
            <el-input v-model="searchForm.keyWord" placeholder="请输入煤矿名称\应用名称\设备名称\设备编码\安装位置" maxlength="30" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安装日期" prop="timeRange">
            <el-date-picker type="datetimerange" placeholder="请选择安装日期" v-model="searchForm.timeRange"
              format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期"
              style="width:400px;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="submitForm">查 询</el-button>
          <el-button @click="reset">重 置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表 -->
    <div class="tableBox">
      <el-table :data="tableList" border style="width: 100%;" height="730px">
        <el-table-column label="煤矿名称  " prop="mkName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="应用名称 " prop="name" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="设备名称" prop="deviceName" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="设备编码" prop="deviceCode" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="安装位置" prop="installLocation" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="安装日期" prop="installDate" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button class="operation-btn" type="text" size="mini" @click="detailsClick(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right" background @current-change="pageNumChange" @size-change="pageSizeChange"
        :current-page="pageNum" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :total="total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!-- 处置 -->
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="40%" style="margin-top: 15vh;"
      :before-close="closeDialogVisible">
      <div class="descriptions">
        <el-descriptions :column="2" border>
          <el-descriptions-item>
            <template slot="label"> 煤矿名称 </template>
            {{ detailsList.mkName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 应用名称 </template>
            {{ detailsList.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 设备名称 </template>
            {{ detailsList.deviceName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 设备编码 </template>
            {{ detailsList.deviceCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 安装位置 </template>
            {{ detailsList.installLocation }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 安装日期 </template>
            {{ detailsList.installDate }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { infolist } from "@/api/oneself/deviceInfo";
import moment from 'moment';

export default {
  name: "deviceInfo",
  data() {
    return {
      // 查询条件
      searchForm: {
        keyWord: '',
        timeRange: [],
        // timeRange:[moment(new Date().getTime() - 3600000 * 24 * 3).format('YYYY-MM-DD HH:mm:ss'), moment(new Date()).format('YYYY-MM-DD HH:mm:ss')],
      },
      rules: {},
      // 列表
      tableList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 处置弹框
      dialogVisible: false,
      detailsList: {},
      dialogTitle: '告警详情',
    };
  },
  methods: {
    // 打开详情弹框
    detailsClick(row) {
      this.dialogVisible = true
      this.detailsList = row;
      this.dialogTitle = '告警详情';
    },
    // 关闭弹框
    closeDialogVisible() {
      this.dialogVisible = false;
    },
    // 查询
    submitForm() {
      this.$refs["searchForm"].validate(valid => {
        if (valid) {
          this.queryList(1);
        }
      });
    },
    // 重置
    reset() {
      this.$set(this.$data, 'searchForm', {});
      this.pageNum = 1;
      this.pageSize = 10;
      this.queryList();
    },
    // 分页
    pageNumChange(num) {
      this.pageNum = num;
      this.queryList();
    },
    pageSizeChange(size) {
      this.pageSize = size;
      this.queryList();
    },
    // 列表请求
    async queryList() {
      let pam = {
        ...this.searchForm,
        startTime: this.searchForm.timeRange ? this.searchForm.timeRange[0] ? moment(this.searchForm.timeRange[0]).format('YYYY-MM-DD HH:mm:ss') : '' : '',
        endTime: this.searchForm.timeRange ? this.searchForm.timeRange[1] ? moment(this.searchForm.timeRange[1]).format('YYYY-MM-DD HH:mm:ss') : '' : '',
      }
      let pam2 = {
        current: this.pageNum,
        size: this.pageSize,
      }
      const data = await infolist(pam, pam2);
      if (data && data.code === 200) {
        this.tableList = data.body.records;
        this.total = data.body.total;
      } else {
        this.$message.error(data.message);
      }
    },
  },
  created() {
    this.queryList(1);
  },
  mounted() {

  },
  beforeDestroy() { },
};
</script>

<style scoped lang="scss">
.deviceInfo {
  width: 100%;
  height: 100%;
  padding: 20px;

  .operation-btn {
    margin: 0 10px;
  }

  .status-color {
    span {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 5px;
      border-radius: 50%;
    }
  }

  .status-color1 {
    color: #FF9502;

    span {
      background: #FF9502;
    }
  }

  .status-color2 {
    color: #4BD964;

    span {
      background: #4BD964;
    }
  }

  .status-color3 {
    color: #59C8FA;

    span {
      background: #59C8FA;
    }
  }

  .status-color4 {
    color: #999999;

    span {
      background: #999999;
    }
  }
}
</style>
